<template>
  <div class="trends2-doctor-list-1" data-number="武德二年">
    <template v-for="(itemInfo,index) in doctorDataClean">
      <div class="first-group" :key="index">
        <template v-for="(item,index) in itemInfo">
          <div class="doctor-info-item" :key="index">
            <div class="left-wrap">
              <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
            </div>
            <div class="right-wrap">
              <div class="name-level-dept-register">
                <div class="name-level">
                  <div class="name item">{{ item.workerName || '\u00a0' }}</div>
                  <div class="level item">
                    <ScrollX>{{ item.workerTitle || '\u00a0' }}</ScrollX>
                  </div>
                </div>
                <div class="dept-register">
                  <div class="dept item" v-if="optionsInfo.doctorDept">
                    <ScrollX>{{ item.deptName || '\u00a0' }}</ScrollX>
                  </div>
                  <div class="register item" v-if="optionsInfo['registerShow']&&(item?.preTreatingPatient?.length)">
                    <ScrollX>{{ item?.preTreatingPatient[0]?.registerObjName || '\u00a0' }}</ScrollX>
                  </div>
                </div>
              </div>
              <div class="patient-wrap">
                <div class="current-patient patient" :class="{'current-patient-only': !optionsInfo['waitPatientShow']}">
                  <div class="patient-type-sign">
                    {{ optionsInfo['waitPatientShow'] ? '就诊' : '正在就诊' }}
                  </div>
                  <div class="patient-content"
                       :class="{'current-patient-content':item.treatingPatient?.length>=2}">
                    <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${item.workerId}`"
                        :class-option="optionScroll"
                        :data="getPatientInfo('current',item)"
                    >
                      <template v-for="itemPatient in getPatientInfo('current',item)">
                        <div class="patient-item">
                          <template v-if="itemPatient.orderNo">
                            {{ itemPatient.orderNo || '\u00a0' }}
                          </template>
                          <template v-if="itemPatient.patientName">
                            {{ itemPatient.patientName || '\u00a0' }}
                          </template>
                        </div>
                      </template>
                    </vue-seamless-scroll>
                  </div>
                </div>
                <div class="wait-patient patient" v-if="optionsInfo['waitPatientShow']">
                  <div class="patient-type-sign">候诊</div>
                  <div class="patient-content"
                       :class="{'wait-patient-content':item.waitingPatientList?.length>=2}">
                    <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${item.workerId}`"
                        :class-option="optionScroll"
                        :data="getPatientInfo('wait',item)"
                    >
                      <template v-for="itemPatient in getPatientInfo('wait',item)">
                        <div class="patient-item">
                          <template v-if="itemPatient.orderNo">
                            {{ itemPatient.orderNo }}
                          </template>
                          <template v-if="itemPatient.patientName">
                            {{ itemPatient.patientName }}
                          </template>
                        </div>
                      </template>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";

export default {
  name: "trends1DoctorList-2",

  componentName: "trends2DoctorList",

  components: {
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    doctorData: {
      type: Array,
      default: Array(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    }
  },

  computed: {
    optionScroll() {
      return {
        hoverStop: true,
        direction: 1,                 // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
        limitMoveNum: 2,              // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    doctorDataClean() {
      return this.$lodash.chunk(this.doctorData, 1)
    },

    // 候诊患者&就诊患者
    getPatientInfo() {
      return function (type, row) {
        switch (type) {
          case 'current':
            if (row?.treatingPatient.length) {
              return row.treatingPatient.slice(0, 1)
            } else {
              return []
            }
          case 'wait':
            if (row?.waitingPatientList.length) {
              return row.waitingPatientList.slice(0, 1)
            } else {
              return []
            }
        }
      }
    }
  },

  mounted() {

  },

  methods: {
    handleError(event) {
      event.target.src = '/tpleditor/resource/assets/images/header.png'
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  }

};
</script>

<style lang="scss" scoped>
.trends2-doctor-list-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;

  .first-group {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;

    &:last-child {
      margin-bottom: 0;
    }

    .doctor-info-item {
      flex: 1;
      flex-shrink: 0;
      flex-basis: 0;
      height: calc(100%);
      width: 100%;
      border-radius: 18px;
      overflow: hidden;
      padding: 28px 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .left-wrap {
        width: 394px;
        height: 100%;
        flex-shrink: 0;
        overflow: hidden;
        font-size: 24px;
        margin-right: 16px;
        border-radius: 18px;
        background: #E8E8E8;
        box-sizing: border-box;

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border: 1px #dcdee2 solid;
        }
      }

      .right-wrap {
        width: calc(100% - 394px - 32px);
        margin-left: 16px;
        overflow: hidden;
        box-sizing: border-box;

        .name-level-dept-register {
          font-weight: 500;
          font-size: 60px;
          color: #333333;
          line-height: 1.5;
          min-height: 260px;
          max-height: 260px;
          width: 100%;
          flex-shrink: 0;
          overflow: hidden;
          display: flex;
          flex-direction: column;

          .name-level {
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: center;

            .item {
              flex-shrink: 0;
              flex-grow: 1;
              flex-basis: 0;
              overflow: hidden;
              box-sizing: border-box;
            }

            .name {
              font-weight: 500;
              font-size: 78px;
              color: #333333;
              display: flex;
              max-width: 314px;
              flex-grow: 0;
              flex-basis: auto;
              margin-right: 26px;
              white-space: nowrap;
              box-sizing: border-box;
              text-overflow: ellipsis;
            }

            .level {
              font-weight: 500;
              font-size: 36px;
              color: #FFFFFF;
              padding: 32px 16px;
              border-radius: 8px;
              overflow: hidden;
              text-align: center;
              display: flex;
              flex-shrink: 0;
              flex-grow: 1;
              max-height: 54px;
              background: rgba(0, 89, 179, 1);
            }
          }

          .dept-register {
            display: flex;
            margin-top: 6px;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            height: calc(100% - 100px);

            .item {
              flex-shrink: 0;
              flex-grow: 1;
              overflow: hidden;
              color: #0059B3;
              font-weight: 500;
              font-size: 48px;
              line-height: 1.4;
              white-space: nowrap;

              :deep(.st-inner) {
                margin: inherit;
              }
            }

            .dept {
              margin-bottom: 4px;
            }

            .register {
              margin-top: 4px;
            }
          }

        }

        .patient-wrap {
          display: flex;
          flex-direction: column;
          flex-grow: 1;

          .patient {
            height: 136px;
            overflow: hidden;
            border-radius: 18px;
            margin-top: 24px;
            display: flex;

            .patient-type-sign {
              flex-basis: 96px;
              flex-shrink: 0;
              height: 100%;
              font-size: 46px;
              justify-content: center;
              align-content: center;
              align-items: center;
              align-self: center;
              text-align: center;
              writing-mode: vertical-rl; /* 文字从上到下，从右到左排列 */
            }

            .patient-content {
              display: flex;
              flex-direction: column;
              flex-basis: calc(100% - 96px);
              height: 100%;
              justify-content: center;

              .patient-item {
                width: calc(100% - 30px);
                font-size: 70px;
                color: #333333;
                line-height: 1.4;
                padding-left: 30px;
                white-space: nowrap;
              }
            }
          }

          .current-patient {
            background: rgba(0, 89, 179, 0.2);

            .patient-type-sign {
              background: rgba(0, 89, 179, 1);
              color: white;
            }

            .patient-content {
              .patient-item {
                color: rgba(0, 89, 179, 1);
              }
            }

            .current-patient-content {
              justify-content: center;

              .patient-item {
                line-height: 1.5;
              }
            }

          }

          //隐藏候诊患者
          .current-patient-only {
            display: flex;
            height: 254px;
            flex-direction: column;

            .patient-type-sign {
              width: 100%;
              font-size: 64px;
              overflow: hidden;
            }

            .patient-content {
              overflow: hidden;

              .patient-item {
                font-size: 76px;
                padding-left: 80px;
                box-sizing: border-box;
              }
            }
          }

          .wait-patient {
            background: rgba(229, 134, 2, 0.2);

            .patient-type-sign {
              background: rgba(229, 134, 2, 1);
              color: white;
            }

            .patient-content {
              .patient-item {
                color: rgba(229, 134, 2, 1);
              }
            }

            .wait-patient-content {
              justify-content: center;

              .patient-item {
                line-height: 1.5;
              }
            }
          }
        }
      }


    }
  }
}
</style>